<!-- 笔记本详情页主要内容2 -->
<template>
  <div class="computerNR2">
      <div class="box">
      <div class="container">
        <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d96880d97340de4edaa787e85b9c4bb0.jpg" alt>
        <div class="container-right">
          <p class="p1">小米无线键鼠套装</p>
          <p class="p2">轻松畅享，无线办公</p>
          <p class="p3">￥1399</p>
           <router-link to="/Moer"><button>立即购买</button></router-link>
        </div>
      </div>
      <div class="container-next">
          <div class="next-left">
          <img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2480cc04242d1fdfba0776640c4ce09f.jpg" alt="">
          <div class="word">
              <div class="word-left">
                  <p class="p1">悦米机械键盘Pro静音版</p>
                  <p class="p2">天生极简 精致由内到外</p>
              </div>
              <div class="word-right">
                  <p class="p3">￥599</p>
                   <router-link to="/Moer"><button>立即购买</button></router-link>
              </div>
          </div>
      </div>
      <div class="next-right">
          <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/699c5983569499fe010aa2f4b96eec16.jpg" alt="">
          <div class="word">
              <div class="word-left">
                  <p class="p1">小米无线鼠标2</p>
                  <p class="p2">极简设计，舒适静音</p>
              </div>
              <div class="word-right">
                  <p class="p3">￥59</p>
                  <router-link to="/Moer"><button>立即购买</button></router-link>
              </div>
          </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:"computerNR2",
  data () {
    return {
    };
  },

  components: {},
}

</script>
<style lang='less' scoped>
.computerNR2{
    background-color: rgb(240, 235, 235);
    padding: 10px;
}
.box {
  width: 1250px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
}
.container {
  background-color: #fff;
  height: 300px;
  display: flex;
  margin-bottom: 10px;

}
.container img{
    width: 750px;
    height: 300px;
    cursor: pointer;
  transition: all 0.6s;
  &:hover{
    transform: scale(1.08);
    box-shadow: 0px 0px 18px rgba(0,0,0,0.5);
  }
}

.container-right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 100px;
}
.container-right .p1{
    font-size: 24px;
    margin-bottom: 15px;
}
.container-right .p2{
    color: #666666;
     margin-bottom: 15px;
}
.container-right .p3{
    font-size: 24px;
    color: #EA625B;
     margin-bottom: 15px;
}
.container-right button{
    background-color: #fd5452;
    width: 160px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    display: block;
    text-decoration: none;
    font-size: 18px;
    border: none;
    color: aliceblue;
    margin-right: 10px;
}
.container-next{
  width: 1250px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  justify-content: space-between;
}
.next-left{
    background-color: #fff;
    width: 500px;
    margin-bottom: 20px;
}
.next-right{
    background-color: #fff;
    width: 500px;
    margin-bottom: 20px;
}
 img{
    width: 500px;
    height: 300px;
    cursor: pointer;
  transition: all 0.6s;
  &:hover{
    transform: scale(1.08);
    box-shadow: 0px 0px 18px rgba(0,0,0,0.5);
  }
}
.word{
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}
.word .p1{
    margin-left: 10px;
    font-size: 22px;
}
.word .p2{
    color: #666666;
    margin-top: 10px;
    margin-left: 10px;
}
.word .p3{
    font-size: 24px;
    color: #EA625B;
    text-align: center;
}
.word button{
    background-color: #fd5452;
    width: 130px;
    height: 35px;
    line-height: 30px;
    text-align: center;
    display: block;
    text-decoration: none;
    font-size: 18px;
    border: none;
    color: aliceblue;
    margin-right: 10px;
      &:hover {
    background-color: orangered;
  }
}
</style>